<template>
  <div class="w-full">
    <!-- <code> -->
    <!-- {{ arr }} -->
    <!-- <pre class="w-[400px]"> {{ arr }}</pre> -->
    <!-- </code> -->
    <div class="gva-btn-list">
      <el-button type="primary" icon="plus" @click="加一行" plain size="small">加一行</el-button>
      <el-button type="primary" icon="check" @click="提交" plain size="small">提交</el-button>
    </div>

    <el-table style="width: 100%" tooltip-effect="dark" :data="arr" row-key="ID">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column align="left" :label="item" width="120" v-for="item in 可选属性">
        <template #default="{ row }">
          <!-- row=[{"label": "大小", "value": 6}, {"label": "颜色", "value": "白"}] -->
          <template v-for="item2 in row['可选属性值']">
            <el-input v-model="item2.value" v-if="item2.label == item" />
          </template>
        </template>
      </el-table-column>

      <el-table-column align="left" label="价格" prop="价格" width="120">
        <template #default="{ row }">
          <el-input :disabled="row.disabled" v-model.number="row.价格" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="库存" prop="库存" width="120">
        <template #default="{ row }">
          <el-input :disabled="row.disabled" v-model.number="row.库存" />
        </template>
      </el-table-column>
      <el-table-column label="图片" prop="图片">
        <template #default="scope">
          <!-- <div class="multiple-img-box">
            <el-image preview-teleported v-for="(item, index) in scope.row.图片" :key="index"
              style="width: 80px; height: 80px" :src="getUrl(item)" fit="cover" />
          </div> -->
          <div>
            <SelectImage v-model="scope.row.图片" file-type="image" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="primary" link icon="delete" @click="删行(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup>
import { ref, reactive, computed } from 'vue'
// import * as a from 'amtf/a/utils';
import *  as a from '@/amtf/amtf/utils'

import SelectImage from '@/components/selectImage/selectImage.vue';
const arr = reactive([])
const 拟删除子表ids = {}
// const arr = reactive([])

// const 展示arr = computed(() => {
//   let res = a.数组过滤一排除(arr, '标记', '删除')
//   return res
// })

const props = defineProps({
  可选属性: { type: Array, default: [] }
})

function 初始化(params) {
  a.数组重新赋值(arr, params)
}

function 加一行() {
  console.log(`props 👉`, props)
  let 可选属性值 = props.可选属性.map((params) => {
    return { label: params }
  })
  arr.unshift({
    可选属性值,
    库存: 99,
    价格: 99,
    图片: '',
  })
}

const 删行 = (row) => {
  // const index = arr.indexOf(row);
  // if (index !== -1) arr.splice(index, 1);
  let ID = row.ID
  a.删除元素(arr, row)
  if (ID) {
    拟删除子表ids[ID] = ''
  }
}

const 提交 = async () => {
  console.log(`arr 👉`, arr)
}

defineExpose({ arr, 初始化,拟删除子表ids })

</script>

<style scoped>
:deep(.el-table .el-table__cell) {
  z-index: auto;
}
</style>
